.tl-red-button {
    color: white !important;
    background-color: transparent !important;
    transition: background-color 300ms; /* 过渡动画 */

    &:hover {
        color: white !important;
        border: rgb(244, 67, 54) solid 1px !important;
        background-color: rgb(244, 67, 54) !important;
    }
}

.tl-gradient-button {
    padding: 7px 10px !important;
    -webkit-background-image: linear-gradient(to right, #bf30ac 10%, #0f9d58 90%) !important;
    background-image: linear-gradient(to right, #bf30ac 10%, #0f9d58 90%) !important;

    &:hover {
        -webkit-background-image: linear-gradient(to right, #bf30ac 0, #0f9d58 100%) !important;
        background-image: linear-gradient(to right, #bf30ac 0, #0f9d58 100%) !important;
    }
}

.tl-spin-hover {
    border: 3px solid rgba(255, 255, 255, .5);
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;

    &:hover {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.tl-a {
    color: inherit;
    text-decoration: none !important;

    &:hover {
        color: #cf1322 !important;
        text-shadow: 0 0 1px #cf1322;
    }
}

.tl-background-color {
    background: #2d3a4b;
    //background-color: rgba(246, 246, 246, .9);
}

.tl-box-shadow-mini {
    -webkit-box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) !important;
    -moz-box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) !important;
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) !important;
}

.tl-box-shadow-small {
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
}

.tl-box-shadow-medium {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
}

.tl-text-shadow-mini {
    text-shadow: 0 3px 6px rgba(64, 64, 64, .6);
}

.tl-text-shadow-small {
    text-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

.tl-card-hover {
    //border: #0f9d58 solid 2px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    transition: top 500ms, box-shadow 500ms; /* 过渡动画 */
    top: 0;
    position: relative;
    &:hover {
        top: -10px;
        position: relative;
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    }
}

.tl-card-hover-small {
    &:hover {
        box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) !important;
        -webkit-box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5) !important;
    }
}

.tl-border-radius-small {
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
}

.tl-text {
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.5 !important;
}
.tl-h3-title {
    border-left: var(--tl-success) solid 4px;
    padding-left: 6px;
    //height: 24px;
    //line-height: 24px;
}
.tl-scrollbar-wrapper {
    margin-bottom: -7px !important;
    margin-right: -7px !important;
    overflow-x: hidden !important;
}
